/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import Link from '@docusaurus/Link';
import Translate from '@docusaurus/Translate';
import { Tags, TagType, User } from '@site/src/data/users';
import { sortBy } from '@site/src/utils/jsUtils';
import clsx from 'clsx';
import React from 'react';
import styles from './styles.module.css';

const TagComp = React.forwardRef<HTMLLIElement, { tag: TagType }>(
  ({ tag }, ref) => (
    <li ref={ref} className={styles.tag} title={Tags[tag].description}>
      <span className={styles.textLabel}>{Tags[tag].label}</span>
      <span className={styles.colorLabel} style={{ backgroundColor: Tags[tag].color }} />
    </li>
  ),
);

function ShowcaseCardTag({ tags }: { tags: TagType[] }) {
  const tagObjects = tags.map((tag) => ({ tag, label: Tags[tag].label }));
  const tagObjectsSorted = sortBy(tagObjects, (tagObject) => tagObject.label);

  return (
    <>
      {tagObjectsSorted.map(({ tag }, i) => (
        <TagComp key={i} tag={tag} />
      ))}
    </>
  );
}

function DownloadButton({ href, platform }: { href: string; platform: string }) {
  return (
    <Link
      href={href}
      className={clsx('button button--primary button--sm', styles.downloadButton)}>
      <Translate
        id="showcase.card.download"
        values={{ platform }}>
        {'{platform}'}
      </Translate>
    </Link>
  );
}

export default function ShowcaseCard({ user }: { user: User }) {
  return (
    <li key={user.key} className={clsx('card shadow--md', styles.showcaseCard)}>
      <div className={clsx('card__image', styles.showcaseCardImage)}>
        {user.preview && (
          <img
            src={user.preview}
            alt={user.title}
            className={styles.img}
          />
        )}
      </div>
      <div className="card__body">
        <div className={clsx(styles.showcaseCardHeader)}>
          <h4 className={styles.showcaseCardTitle}>
            <Link href={user.website} className={styles.showcaseCardLink}>
              {user.title}
            </Link>
          </h4>
        </div>
        <p className={styles.showcaseCardBody}>{user.description}</p>
        <div className={styles.downloadButtons}>
          {user.downloads.windows && (
            <DownloadButton href={user.downloads.windows} platform="Windows" />
          )}
          {user.downloads.mac && (
            <DownloadButton href={user.downloads.mac} platform="macOS" />
          )}
          {user.downloads.linux && (
            <DownloadButton href={user.downloads.linux} platform="Linux" />
          )}
        </div>
      </div>
      <ul className={clsx('card__footer', styles.cardFooter)}>
        <ShowcaseCardTag tags={user.tags} />
        <div className={styles.sourceLink}>
          推荐来源：<Link href={user.source?.url || "https://atomgit.com"}>{user.source?.name || "AtomGit"}</Link>
        </div>
      </ul>
    </li>
  );
}
